<template>
	<view class="login">
		<view class="login-container">
			<!-- 			<image src="../../static/imgs/loginicon.png" style= "margin-top: 33px;"></image> -->
			<image src="../../static/imgs/loginicon2.png" style="width: 200px; height: 75px; margin-top: 33px;"></image>
			<view class="input-info">
				<text class ="login_name">手机号:</text>
				<image class="login_button" src="../../static/imgs/login.png"></image>
				<input class="phone" maxlength="11"/>
			</view>
			<view class="input-info">
				<text class ="login_name">验证码:</text>
				<image class="login_button" src="../../static/imgs/login.png"></image>
				<input class="phone" maxlength="6" style="width: 20%;" />
				<text class ="code" @click="get_code">获取验证码</text>
			</view>
			<view class="input-info">
				<text class ="login_name" >新密码:</text>
				<image class="login_button" src="../../static/imgs/login.png"></image>
				<input class="phone" maxlength="12" password="true" />
			</view>
			<view class="input-info">
				<text class ="login_name" style="left: 45%;" @click="GoToLogin">确认</text>
				<image class="login_button" style="width: 35%;" src="../../static/imgs/login.png" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			_self = this
		},
		onPullDownRefresh() {
			URL: '/pages/login/login'
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			GoToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			get_code(){
				
			}
		},
		components: {},
	}
</script>

<style lang="scss" scoped>
	.login {
		overflow: hidden;
		width: 100vw;
		height: 100vh;
		text-align: center;
		background-image: linear-gradient(to bottom right, #021B79, #0b2997, #254dd3);

		.input-info {
			position: relative;
			
			.login_button {
				width: 75%;
				height: 100rpx;
				margin-top: 20rpx;
				
			}
			
			.login_name{
				position: absolute;
				display: block;
				width: 35%;
				left: 160rpx;
				bottom: 35rpx;
				color: #ffffff;
				text-align: left;
				font-size: 40rpx;
				color: white;
			}
			.phone {
				position: absolute;
				display: block;
				line-height: 100rpx;
				width: 35%;
				left: 300rpx;
				bottom: 30rpx;
				color: #98a2c4;
				border-bottom: 1px solid #b6b6b6;
				text-align: left;
			}
			.code {
				position: absolute;
				display: block;
				width: 35%;
				left: 450rpx;
				bottom: 45rpx;
				color: #98a2c4;
				text-align: left;
				font-size: 28rpx;
			}
		}
	}
</style>
